<template>
  <!-- 注册页面 -->
  <div class="wrap">
    <div class="register-container">
      <!-- 步骤1：填写账户信息 -->
      <div v-if="step === 1" class="register-card">
        <div class="register-header">
          <h2 class="register-title">注册账户</h2>
          <div class="register-steps">
            <div class="step active">
              <span class="step-number">1</span>
              <span class="step-text">填写账户信息</span>
            </div>
            <div class="step-divider"></div>
            <div class="step">
              <span class="step-number">2</span>
              <span class="step-text">注册成功</span>
            </div>
          </div>
        </div>

        <div class="register-form">
          <ul>
            <!-- 用户类型选择 -->
            <li class="form-item radio-group">
              <label class="form-label">用户类型</label>
              <div class="radio-options">
                <label class="radio-option" :class="{ checked: userInfo.userType === '1' }">
                  <input v-model="userInfo.userType" type="radio" value="1" class="sr-only"/>
                  <span class="radio-custom"></span>
                  <span class="radio-text">我要投资</span>
                </label>
                <label class="radio-option" :class="{ checked: userInfo.userType === '2' }">
                  <input v-model="userInfo.userType" type="radio" value="2" class="sr-only"/>
                  <span class="radio-custom"></span>
                  <span class="radio-text">我要借钱</span>
                </label>
              </div>
            </li>

            <!-- 手机号码 -->
            <li class="form-item">
              <label class="form-label">手机号码</label>
              <div class="input-group">
                <input
                    v-model="userInfo.mobile"
                    type="tel"
                    class="form-input"
                    placeholder="请输入手机号码"
                    maxlength="11"
                />
                <button
                    :class="['get-code-btn', sending ? 'disabled' : '']"
                    @click="send()"
                    :disabled="sending"
                >
                  {{ sending ? `${leftSecond}秒后重发` : '获取验证码' }}
                </button>
              </div>
            </li>

            <!-- 短信验证码 -->
            <li class="form-item">
              <label class="form-label">短信验证码</label>
              <div class="input-group">
                <input
                    v-model="userInfo.code"
                    type="text"
                    class="form-input"
                    placeholder="请输入验证码"
                    maxlength="6"
                />
                <span class="input-hint">验证码将发送至您的手机</span>
              </div>
            </li>

            <!-- 密码 -->
            <li class="form-item">
              <label class="form-label">设置密码</label>
              <div class="input-group">
                <input
                    v-model="userInfo.password"
                    type="password"
                    class="form-input"
                    placeholder="请设置登录密码"
                />
                <span class="input-hint">6-24个字符，英文、数字组成，区分大小写</span>
              </div>
            </li>

            <!-- 协议同意 -->
            <li class="form-item agreement">
              <label class="checkbox-option">
                <input type="checkbox" checked class="sr-only"/>
                <span class="checkbox-custom"></span>
                <span class="checkbox-text">
                  我同意
                  <NuxtLink to="#" target="_blank" class="link">《尚融宝注册协议》</NuxtLink>
                </span>
              </label>
              <span class="agreement-hint">请仔细阅读并同意相关条款</span>
            </li>

            <!-- 提交按钮 -->
            <li class="form-item">
              <button
                  @click="register()"
                  class="submit-btn"
                  :disabled="!userInfo.mobile || !userInfo.code || !userInfo.password"
              >
                下一步
              </button>
            </li>
          </ul>
        </div>

        <!-- 已有账号 -->
        <div class="login-link">
          已有账号？
          <NuxtLink to="/login" class="link">立即登录</NuxtLink>
        </div>
      </div>

      <!-- 步骤2：注册成功 -->
      <div v-if="step === 2" class="register-card success-card">
        <div class="success-icon">
          <i class="icon-check"></i>
        </div>
        <h2 class="success-title">注册成功！</h2>
        <p class="success-message">
          您的账号 <span class="highlight">{{ userInfo.mobile }}</span> 已注册成功
        </p>
        <div class="success-actions">
          <NuxtLink to="/login" class="primary-btn">立即登录</NuxtLink>
          <NuxtLink to="/" class="secondary-btn">返回首页</NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '~/assets/css/register.css'

export default {
  data() {
    return {
      step: 1, // 注册步骤
      userInfo: {
        userType: '1', // 默认选择"我要投资"
        mobile: '',
        code: '',
        password: ''
      },
      sending: false, // 是否发送验证码
      second: 60, // 倒计时总时长
      leftSecond: 0 // 剩余时间
    }
  },

  methods: {
    // 发送验证码
    send() {
      // 验证手机号格式
      const reg = /^1[3-9]\d{9}$/
      if (!this.userInfo.mobile) {
        this.$message.error('请输入手机号码')
        return
      }
      if (!reg.test(this.userInfo.mobile)) {
        this.$message.error('请输入正确的手机号码')
        return
      }

      // 防止重复提交
      if (this.sending) return
      this.sending = true

      // 开始倒计时
      this.timeDown()

      // 发送验证码请求
      this.$axios
          .$get(`/api/sms/send/${this.userInfo.mobile}`)
          .then((response) => {
            this.$message.success(response.message)
          })
          .catch(() => {
            // 请求失败时重置状态
            this.sending = false
            this.leftSecond = 0
          })
    },

    // 倒计时函数
    timeDown() {
      this.leftSecond = this.second
      const timer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond <= 0) {
          clearInterval(timer)
          this.sending = false
        }
      }, 1000)
    },

    // 注册提交
    register() {
      // 简单验证
      if (!this.userInfo.mobile) {
        return this.$message.error('请输入手机号码')
      }
      if (!this.userInfo.code) {
        return this.$message.error('请输入验证码')
      }
      if (!this.userInfo.password) {
        return this.$message.error('请设置密码')
      }
      if (this.userInfo.password.length < 6) {
        return this.$message.error('密码长度不能少于6位')
      }

      this.$axios
          .$post('/api/core/userInfo/register', this.userInfo)
          .then((response) => {
            this.step = 2
          })
          .catch((error) => {
            this.$message.error(error.response?.data?.message || '注册失败，请重试')
          })
    }
  }
}
</script>

<style scoped>

</style>